<template>
  <div class="requirementInfo-component">
    <div v-if="titleShow" class="title-container">
      <div class="left">
        <p class="title-con"><span>基本信息</span></p>
      </div>
    </div>
    <div v-if="detailData" class="info-container">
      <el-form ref="elForm" :model="detailData" size="small" label-width="140px">
        <el-row
          :gutter="15"
          class="form-row01"
          style="margin-left:0px;margin-right:0px;display:flex;justify-content:flex-start;flex-wrap:wrap;"
        >
          <el-form-item label="项目来源：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.project_source||"无" }}</div>
          </el-form-item>
          <el-form-item v-if="detailData.demand_idea_name" label="关联项目课题：" style="width:33.333%;">
            <div class="tag-container"><el-button type="text" size="medium" class="tag-hover text-line-1" style="padding: 8px 0px" @click="toRequireDetail">{{ detailData.demand_idea_name }}</el-button></div>
            <!-- <div class="text-line-2">{{ detailData.demand_idea_name||"无" }}</div> -->
          </el-form-item>
          <el-form-item label="项目名称：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.project_name||"无" }}</div>
          </el-form-item>
          <el-form-item label="项目类型：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.project_type||"无" }}</div>
          </el-form-item>
          <el-form-item label="申报类别：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.apply_type||"无" }}</div>
          </el-form-item>
          <el-form-item label="剂型与规格：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.dosage_norms||"无" }}</div>
          </el-form-item>
          <el-form-item label="药物类别：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.medical_type||"无" }}</div>
          </el-form-item>
          <el-form-item label="药物成分：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.medical_ingredient||"无" }}</div>
          </el-form-item>
          <el-form-item label="功能与主治：" style="width:33.333%;">
            <div class="text-line-2">{{ detailData.function_attending||"无" }}</div>
          </el-form-item>

        </el-row>
        <el-row v-show="unfold" :gutter="15" style="margin-left:0px;margin-right:0px;">
          <el-form-item label="项目质量标准来源：">
            <div>{{ detailData.quality_source||"无" }}</div>
          </el-form-item>
          <el-form-item label="附件：">
            <file-preview :file-list="detailData.enclosure" />
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn-container">
        <div class="line" />
        <div class="btn-con" @click="unfoldOption"><i class="el-icon-arrow-left" /><span v-if="unfold">收起</span><span v-else>展开</span><i
          class="el-icon-arrow-right"
        /></div>
        <div class="line" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titleShow: {
      type: Boolean,
      default: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      unfold: false
    }
  },

  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    unfoldOption() {
      this.unfold = !this.unfold
    },
    toRequireDetail() {
      if (this.checkDetailPermis(['demand:require'])) {
        if (!this.detailData.demand_idea_id) {
          this.$message.error('该需求数据存在问题')
          return
        }
        this.$router.push({
          name: 'requirementDetail',
          query: {
            requireId: this.detailData.demand_idea_id,
            from: 'audit' // 用于判断是否从审批详情过来的
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/assets/scss/views/projectInfomation/details/modules/baseInfo.scss";
</style>
